<!--
 * @Author: your name
 * @Date: 2022-11-10 17:24:32
 * @LastEditTime: 2022-12-07 16:52:11
 * @LastEditors: yuhan
 * @Description: 
 * @FilePath: \ft-apiadmin\apiadmin\src\layouts\components\NavBar\index.vue
-->
<template>
  <div class="nav-bar-container">
    <el-row :gutter="15">
      <el-col :xs="4" :sm="12" :md="12" :lg="12" :xl="12">
        <div class="left-panel">
          <component
            v-if="interProject"
            :title="collapse ? '展开' : '收起'"
            class="icon-hover fold"
            :is="collapse ? 'icon-menu-fold-one' : 'icon-menu-unfold-one'"
            theme="filled"
            size="16"
            :strokeWidth="4"
            fill="#666"
            @click="handleCollapse"
          />
          <!-- <template v-if="isBreadcrumb">
            <Breadcrumb />
          </template> -->
          <Logo class="logo" v-if="!interProject" />
        </div>
      </el-col>
      <el-col :xs="20" :sm="12" :md="12" :lg="12" :xl="12">
        <RightPanel />
      </el-col>
    </el-row>
    <h1 class="projectName" v-if="interProject">{{ projectInfo.projectName }}</h1>
  </div>
</template>

<script>
export default {
  name: "NavBar",
};
</script>

<script setup>
import { computed } from "vue";
import { useStore } from "vuex";

// import { useI18n } from "vue-i18n";
// const { t } = useI18n();

const store = useStore();

const collapse = computed(() => {
  return store.getters.collapse;
});

// const isBreadcrumb = computed(() => {
//   return store.getters['setting/isBreadcrumb'];
// });

// const settings = computed(() => {
//   return store.getters['setting/settings'];
// });

const interProject = computed(() => {
  return store.getters["project/interProject"];
});

const emit = defineEmits(["handleCollapse"]);

const projectInfo = computed(() => {
  return store.getters["project/row"];
});

const handleCollapse = () => {
  emit("handleCollapse");
};
</script>

<style lang="scss" scoped>
.nav-bar-container {
  position: relative;
  height: $base-nav-bar-height;
  padding-right: $base-padding;
  overflow: hidden;
  user-select: none;
  background: $base-color-white;
  box-shadow: $base-box-shadow;
  .left-panel {
    display: flex;
    align-items: center;
    justify-items: center;
    height: $base-nav-bar-height;
    :deep(.logo) {
      .logo-title {
        color: #333 !important;
      }
    }
    .fold-unfold {
      color: $base-color-gray;
      cursor: pointer;
    }
    .fold {
      padding: $base-padding-20-10;
    }
    :deep(.breadcrumb-container) {
      margin-left: $base-margin-10;
    }
  }
  .projectName {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>
